<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <!-- Basic Page Needs
                ================================================== -->
    <meta content="en-us" http-equiv="Content-Language" />
    <meta name="msvalidate.01" content="37B5FF54A6C0E736E541067F95C2BC89" />
    <title>{{ page.title }}</title>
    <meta name="description" content="{{page.description}}" />
    <meta name="author" content="{{site.author}}" />
    <!-- Mobile Specific Metas
      ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <!-- CSS
      ================================================== -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="/css/base.css" />
    <link rel="stylesheet" href="/css/skeleton.css" />
    <link rel="stylesheet" href="/css/layout.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/scripts/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="/scripts/modernizr.custom.11550.js"></script>
    <script type="text/javascript" src="/scripts/matchmedia.js"></script>
    <script type="text/javascript" src="/scripts/picturefill.js"></script>
   
    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    <!-- Favicons
	    ================================================== -->
    <link rel="shortcut icon" href="/img/favicon.ico" />
    <link rel="Alternate" type="application/rss+xml" title="RSS feed for markgroves.us" href="http://feeds.feedburner.com/markgroves" />

    <script type="text/javascript">
        $(document).ready(function () {
            $(".photo-section").click(function () {
                if ($(".photo-section").css("visibility") == "visible") {
                    $(".photo-section").css("visibility", "hidden");
                    $(".photo_comments").css("visibility", "visible");
                    $(".info_comments").css("display", "none");
                }
            });
            $(".comment_photograph").click(function () {
                $(".photo-section").css("visibility", "visible");
                $(".photo_comments").css("visibility", "hidden");
                $(".info_comments").css("display", "inline");
            });

            $(".photo-section").hover(
                function () {
                    $(".info_comments").css("visibility", "visible");

                },
                function () {
                    $(".info_comments").css("visibility", "hidden");
                });

        });

        function dateDiff(date1, date2) {
            var diff = Date.parse(date2) - Date.parse(date1);
            return isNaN(diff) ? NaN : {
                diff: diff,
                ms: Math.ceil(diff % 1000),
                s: Math.ceil(diff / 1000 % 60),
                m: Math.ceil(diff / 60000 % 60),
                h: Math.ceil(diff / 3600000 % 24),
                d: Math.ceil(diff / 86400000)
            };
        }
    </script>
    
    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-4775170-1']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
</head>
<body>
    <div id="header">   
        <div class="container" >
            <div class="one-third column alpha" id="logo">
                <a href="{{ site.url }}">Mark<span class="semi">Groves</span></a>
            </div>
            <div class="two-thirds column omega">
                <nav class="main_nav">
                    <div class="menuitem alpha"><a href="/photographs.html">photographs</a></div>
                    <div class="seperator"></div>
                    <div class="menuitem"><a href="/blog.html">articles</a></div>
                    <div class="seperator"></div>
                    <div class="menuitem omega"><a href="/about.html">profile</a></div>
                </nav>
            </div>
        </div> <!-- container --->
    </div>
    {{content}}

</body>
</html>
